<!DOCTYPE html>
<html>
<head>
    <title>环境变量调试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .debug-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
        .env-var { margin: 5px 0; }
        .missing { color: red; }
        .present { color: green; }
    </style>
</head>
<body>
    <h1>环境变量调试页面</h1>
    
    <div class="debug-section">
        <h2>直接检查 import.meta.env</h2>
        <div id="env-check"></div>
    </div>

    <div class="debug-section">
        <h2>环境变量列表</h2>
        <div id="env-list"></div>
    </div>

    <div class="debug-section">
        <h2>测试特定变量</h2>
        <button onclick="testEnvVars()">检查环境变量</button>
        <div id="test-results"></div>
    </div>

    <script type="module">
        function checkEnvVars() {
            const envCheck = document.getElementById('env-check');
            const envList = document.getElementById('env-list');
            
            // 检查特定变量
            const apiKey = import.meta.env.VITE_DEEPSEEK_API_KEY;
            const apiUrl = import.meta.env.VITE_DEEPSEEK_API_URL;
            
            envCheck.innerHTML = `
                <div class="env-var ${apiKey ? 'present' : 'missing'}">
                    VITE_DEEPSEEK_API_KEY: ${apiKey || '未定义'}
                </div>
                <div class="env-var ${apiUrl ? 'present' : 'missing'}">
                    VITE_DEEPSEEK_API_URL: ${apiUrl || '未定义'}
                </div>
            `;

            // 列出所有环境变量
            let envVars = [];
            for (const key in import.meta.env) {
                envVars.push(`<div>${key}: ${import.meta.env[key]}</div>`);
            }
            envList.innerHTML = envVars.join('') || '无环境变量';
        }

        // 立即检查
        checkEnvVars();

        // 全局函数供按钮使用
        window.testEnvVars = checkEnvVars;
    </script>
</body>
</html>